import { func } from "prop-types";
import React, { Component, useState } from "react";
export default class One extends Component {
    constructor(props) {
        super(props)
        // 改变this指向问题
        // this.hanlder = this.hanlder.bind(this)
        this.add = this.add.bind(this)
    }
    state = {
        count: 1,
        add: 2
    }

    hanlder() {
        console.log("我触发了事件", this)
    };
    aa = () => {
        console.log("我是箭头函数", this)
    }
    // edit() {
    //     this.setState({
    //         count: ++this.state.count,
    //     })
    //     document.title = this.state.count
    // }
    edit = (n) => {
        this.setState(({ count }) => {
            return {
                count: ++count
            }
        }, () => {
            document.title = this.state.count
        })
    }
    add() {
        for (let i = 0; i < 100; i++) {
            this.setState({
                add: ++this.state.add
            })
        }
    }
    go(a) {
        alert(a)
    }
    go1 = n => {
        alert(n)
    }
    render() {
        let obj = {}
        let { count, add } = this.state
        let { go, go1 } = this
        return (
            <div>
                <button onClick={this.hanlder}>点击事件</button> <br /><br />
                <button onClick={this.hanlder.bind(this)}>点击事件改变this指向</button><br /><br />
                <button onClick={this.aa}>箭头函数解决this指向问题</button><br /><br />
                <button onClick={go.bind(this, 2)}>类普通函数改变this指向传参</button><br /><br />
                <button onClick={() => { go(2) }}>类普通函数不改变this指向传参</button><br /><br />
                <button onClick={() => { go1(1) }}>类普通箭头传参</button><br /><br />
                {/* <button onClick={this.edit.bind(this)}>点击修改state值</button> */}
                <button onClick={this.edit}>点击修改state值</button><br /><br />
                {/* 多次执行的setState会合并前提条件是在同一个方法短时间内执行 */}
                <button onClick={this.add}>点击多次修改state值</button><br /><br />
                <h1>state.count的值：{count}</h1>
                <h1>state.add的值：{add}</h1>
            </div>
        )
    }
}

// export default function One() {
//     function fn(n) {
//         alert(n)
//     };
//     let [aa, a] = useState(1)
//     let [bb, b] = useState(2)
//     let [arr, arrr] = useState([1, 2, 3, 4])
//     function edit() {
//         a(prea => ++prea)
//     }
//     function edit1() {
//         b(bbb => ++bbb)
//     }
//     return (
//         <div>
//             <button onClick={() => { fn(23) }}>函数类传参</button>
//             <button onClick={edit}>点击修改aa</button>
//             <button onClick={edit1}>点击修改bb</button>
//             <h1>aa:{aa}</h1>
//             <h1>bb:{bb}</h1>
//             <h1>arr:{arr[0]}</h1>
//         </div>
//     )
// }